<!-- 
内边距
-->

<template>
  <div class="colStart">
    <div class="colStart">
      <div class="rowBetween">
        <div class="rowStart">
          <div class="cLabel">外部</div>
          <el-switch v-model="_widget.style.isBorderShadow!" active-text="开启" />
        </div>
        <div class="rowStart ml-4" style="align-items: center">
          <div class="cLabel">颜色</div>
          <el-color-picker
            v-model="_widget.style.borderShadow![4]"
            show-alpha
            :disabled="!_widget.style.isBorderShadow"
          ></el-color-picker>
        </div>
      </div>
      <div class="rowBetween mt-2">
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">水平</div>
          <el-input-number
            v-model="_widget.style.borderShadow![0]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadow"
          />
        </div>
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">垂直</div>
          <el-input-number
            v-model="_widget.style.borderShadow![1]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadow"
          />
        </div>
      </div>
      <div class="rowBetween mt-2">
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">模糊半径</div>
          <el-input-number
            v-model="_widget.style.borderShadow![2]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadow"
          />
        </div>
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">扩散半径</div>
          <el-input-number
            v-model="_widget.style.borderShadow![3]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadow"
          />
        </div>
      </div>
    </div>
    <div class="colStart mt-4">
      <div class="rowBetween">
        <div class="rowStart">
          <div class="cLabel">内部</div>
          <el-switch v-model="_widget.style.isBorderShadowInset!" active-text="开启" />
        </div>
        <div class="rowStart ml-4" style="align-items: center">
          <div class="cLabel">颜色</div>
          <el-color-picker
            v-model="_widget.style.borderShadowInset![4]"
            show-alpha
            :disabled="!_widget.style.isBorderShadowInset"
          ></el-color-picker>
        </div>
      </div>

      <div class="rowBetween mt-2">
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">水平</div>
          <el-input-number
            v-model="_widget.style.borderShadowInset![0]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadowInset"
          />
        </div>
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">垂直</div>
          <el-input-number
            v-model="_widget.style.borderShadowInset![1]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadowInset"
          />
        </div>
      </div>
      <div class="rowBetween mt-2">
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">模糊半径</div>
          <el-input-number
            v-model="_widget.style.borderShadowInset![2]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadowInset"
          />
        </div>
        <div class="rowStart" style="align-items: center">
          <div class="cLabel">扩散半径</div>
          <el-input-number
            v-model="_widget.style.borderShadowInset![3]"
            controls-position="right"
            style="width: 120px"
            :disabled="!_widget.style.isBorderShadowInset"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TypeWidget } from "@/types/TypeDesign";
import type { PropType } from "vue";

const props = defineProps({
  _widget: {
    type: Object as PropType<TypeWidget>,
    default: () => ({}),
  },
});
</script>

<style lang="scss" scoped>
.cLabel {
  font-size: 14px;
  width: 80px;
  text-align: left;
}
</style>
